<template>
  <div class="card art-custom-card sales-card">
    <div class="card-header">
      <p class="title">{{ props.type === '1' ? '科一' : props.type === '4' ? '科四' : props.type === '5' ? '注销恢复' : '满分学习'
      }}
      </p>
      <p class="subtitle">题库数量</p>
    </div>
    <ArtRingChart :data="trendData" :color="['#4C87F3', '#EDF2FF', '#8BD8FC', '#60c041', '#38c0fc', '#f9901f']"
      :radius="['70%', '80%']" height="16.5rem" :showLabel="false" :borderRadius="0"
      :centerText="`${String(carContent?.questionCount)}`" />
    <div class="icon-text-widget">
      <div class="content" v-for="(item, index) in carStaticDataList" :key="index">
        <p>{{ item.questionCount }}</p>
        <span>{{ item.carName }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">

const props = defineProps({
  type: {
    type: String,
    default: ''
  },
  trendInfo: {
    type: Object,
    default: {}
  }
})

const carStaticDataList = computed(() => {
  return props.trendInfo.carStatDataList.filter((car: any) => car.carId !== '0');
})

const carContent = computed(() => {
  return props.trendInfo.carStatDataList.find((i: any) => i.carId === '0' || i.carId === 0);
})


const trendData = computed(() => {
  const list = carStaticDataList.value
  if (list) {
    return list.map((e: any) => {
      return {
        value: e.questionCount,
        name: e.carName
      }
    });
  }

});
</script>
<style lang="scss" scoped>
.card-header {
  padding-left: 20px !important;
}

.subtitle {
  font-size: 12px;
}
</style>
